<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-content">
        <div class="brand">
          <div class="logo">
            <i class="el-icon-coffee-cup"></i>
          </div>
          <h1>管理后台模版</h1>
        </div>

        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item prop="username">
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              clearable
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              @keyup.enter.native="handleLogin"
            >
              <i
                slot="suffix"
                :class="['password-eye', passwordType === 'password' ? 'el-icon-view' : 'el-icon-hide']"
                @click="showPwd"
              />
            </el-input>
          </el-form-item>

          <div class="login-options">
            <el-checkbox v-model="rememberMe">
              <span class="remember-text">记住账号</span>
            </el-checkbox>
            <el-link type="primary" :underline="false">忘记密码</el-link>
          </div>

          <el-button
            :loading="loading"
            type="primary"
            class="login-button"
            @click.native.prevent="handleLogin"
          >
            {{ loading ? '登录中...' : '登录' }}
          </el-button>
        </el-form>

        <div class="login-footer">
          <p>推荐使用 Chrome 浏览器访问</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserLogin',
  data() {
    return {
      loginForm: {
        username: 'admin',
        password: 'admin'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      rememberMe: false
    }
  },
  methods: {
    showPwd() {
      this.passwordType = this.passwordType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('login', this.loginForm)
            .then(() => {
              if (this.rememberMe) {
                localStorage.setItem('username', this.loginForm.username)
              } else {
                localStorage.removeItem('username')
              }
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
              this.$message.error('登录失败，请检查用户名和密码')
            })
        }
      })
    }
  },
  created() {
    const savedUsername = localStorage.getItem('username')
    if (savedUsername) {
      this.loginForm.username = savedUsername
      this.rememberMe = true
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.login-box {
  width: 420px;
  margin: 20px;
}

.login-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 35px 35px 15px;
}

.brand {
  text-align: center;
  margin-bottom: 30px;

  .logo {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    background: #f6f4ff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      font-size: 35px;
      color: #6c5ce7;
    }
  }

  h1 {
    font-size: 24px;
    color: #2c3e50;
    margin: 0;
    font-weight: 500;
  }
}

.login-form {
  .el-input {
    height: 48px;
    
    ::v-deep .el-input__inner {
      height: 48px;
      line-height: 48px;
      border-radius: 6px;
      padding-left: 45px;
      border: 1px solid #e8eaec;
      background: #f8f9fb;
      color: #606266;
      
      &:focus {
        border-color: #6c5ce7;
        background: #fff;
      }

      &:hover {
        border-color: #6c5ce7;
      }
    }

    ::v-deep .el-input__prefix {
      left: 15px;
      color: #909399;
      font-size: 16px;
    }
  }
}

.password-eye {
  font-size: 16px;
  color: #909399;
  cursor: pointer;
  margin-right: 10px;

  &:hover {
    color: #6c5ce7;
  }
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 25px;

  .remember-text {
    color: #606266;
    font-size: 14px;
  }

  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #6c5ce7;
    border-color: #6c5ce7;
  }

  ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }

  ::v-deep .el-link {
    font-size: 14px;
    color: #6c5ce7;
  }
}

.login-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  background: #6c5ce7;
  border-color: #6c5ce7;
  border-radius: 6px;
  margin-bottom: 25px;

  &:hover, &:focus {
    background: #5b4bd4;
    border-color: #5b4bd4;
  }
}

.login-footer {
  text-align: center;
  color: #909399;
  font-size: 13px;
  margin-top: 20px;

  p {
    margin: 0;
  }
}

::v-deep .el-form-item {
  margin-bottom: 25px;

  &.is-error {
    .el-input__inner {
      border-color: #f56c6c !important;
    }
  }
}
</style> 